import * as echarts from 'echarts';

const cardData = [
    {
        num1: '125,12',
        num2: '-12.32',
        num3: '订单统计信息',
        num4: 'fa fa-meetup',
        color1: '#FF6462',
        color2: '--next-color-primary-lighter',
        color3: '--el-color-primary',
    },
    {
        num1: '653,33',
        num2: '+42.32',
        num3: '月度计划信息',
        num4: 'iconfont icon-ditu',
        color1: '#6690F9',
        color2: '--next-color-success-lighter',
        color3: '--el-color-success',
    },
    {
        num1: '125,65',
        num2: '+17.32',
        num3: '年度计划信息',
        num4: 'iconfont icon-zaosheng',
        color1: '#6690F9',
        color2: '--next-color-warning-lighter',
        color3: '--el-color-warning',
    },
    {
        num1: '520,43',
        num2: '-10.01',
        num3: '访问统计信息',
        num4: 'fa fa-github-alt',
        color1: '#FF6462',
        color2: '--next-color-danger-lighter',
        color3: '--el-color-danger',
    },
]
const lineChartOption = {
    title: {
        text: '政策补贴额度',
        x: 'left',
        textStyle: { fontSize: '15'},
    },
    grid: { top: 70, right: 20, bottom: 30, left: 30 },
    tooltip: { trigger: 'axis' },
    legend: { data: ['预购队列', '最新成交价'], right: 0 },
    xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: [
        {
            type: 'value',
            name: '价格',
            splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
        },
    ],
    series: [
        {
            name: '预购队列',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
            lineStyle: { color: '#fe9a8b' },
            itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#fe9a8bb3' },
                    { offset: 1, color: '#fe9a8b03' },
                ]),
            },
        },
        {
            name: '最新成交价',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
            lineStyle: { color: '#9E87FF' },
            itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#9E87FFb3' },
                    { offset: 1, color: '#9E87FF03' },
                ]),
            },

        },
    ],
};
let chartData = [
    { value: 22, name: '未完成' },
    { value: 33, name: '进行中' },
    { value: 44, name: '已完成' }
]
const pieChartOption = {
    title: {
        text: '饼状图',
        x: 'left',
        textStyle: { fontSize: '15'},
    },
    color:['#0691E0','#FFA705','#32D6BA'],
    /*设置图像位置*/
    grid : {
        // top : 30,    //距离容器上边界40像素
        // bottom: 30,   //距离容器下边界30像素
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
        backgroundColor:'#fff'
    },
    legend: {
        data: ['未完成', '已完成', '进行中'],
        orient: 'vertical',  //垂直显示
        y: 'center',    //延Y轴居中
        right: 10, //居右显示
        itemWidth: 30,
        itemHeight: 15,
        itemGap: 15,
        borderRadius: 20,
        icon: 'circle',
        formatter: function (name) {
            let val
            for (let i = 0; i < chartData.length; i++) {
                if (chartData[i].name === name) {
                    val = chartData[i].value
                }
            }
            let arr = [
                '{a|' + name + '}{b|' + val + '}'
            ]
            return arr.join('\n')
        },
        textStyle: {
            rich: {
                a: {
                    verticalAlign: 'right',
                    fontSize: 13,
                    align: 'left',
                    width: 80
                },
                b: {
                    fontSize: 13,
                    align: 'left',
                    width: 50
                }
            }
        }
    },
    series: [
        {
            name: '消防检查',
            type: 'pie',
            radius: [100, 80],
            center: ['30%', '50%'],
            data: chartData,
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            animationEasing: 'cubicInOut',
            animationDuration: 2000
        }
    ]
}
const setting = {
    cardData:cardData,
    lineChartOption: lineChartOption,
    pieChartOption:pieChartOption
};

export default setting;
